import React, { Component } from 'react';
import {bindActionCreators} from 'redux'
import { connect} from 'react-redux'
import * as actions from '../actions/actions.js'
import Link from 'react-router/lib/Link';

import ListView from '../components/ListView';
import ItemCard from '../components/ItemCard';
import BottomBar from '../components/BottomBar';
import SpanWithLeftIcon from '../components/SpanWithLeftIcon'
import cookie from 'react-cookie'


class CateContainer extends Component {
    constructor(props) {
        super(props);
        //console.log(JSON.stringify(this.props));
        this._onScrollHandle = this.onScrollHandle.bind(this);
    }

    componentWillMount() {
        //console.log("will mount",this.props,this.props.cate_id,this.props.location.query.cate_id);



        var department_id=window.sessionStorage.getItem("department_id");

        if(department_id==null)
            department_id=0;

        //点击其他页面 再回来会不重新加载数据
        //如果原先点过分类props.cate_id与URL上的不一致
        if(this.props.cateCardList.get('data').size==0||(this.props.cate_id!=0&&this.props.cate_id!=this.props.location.query.cate_id)){
            //console.log("分类切换");
            //this.props.changeCate(this.props.cate_id);
            this.props.cateCardListFetch(1, department_id,this.props.location.query.cate_id);
        }

        //if (this.props.cateCardList.length==0) {
        //    var cate_id=this.props.location.query.cate_id;
        //    this.props.cateCardListFetch(this.props.currentPage, department_id,cate_id);
        //}

        window.addEventListener("scroll", this._onScrollHandle);
    }

    componentWillReceiveProps(nextProps){
        //if(nextProps.cate_id&&this.props.location.query.cate_id!=nextProps.cate_id){
        //    var department_id=window.sessionStorage.getItem("department_id");
        //
        //    if(department_id==null)
        //        department_id=0;
        //    this.props.cateCardListFetch(1, department_id,nextProps.cate_id.cate_id);
        //}
    }
    componentWillUnmount(){
        window.removeEventListener("scroll", this._onScrollHandle);
    }

    //componentDidMount(){
    //    console.log("did mount");
    //}

    //componentWillUpdate(nextProps,nextState){
    //    console.log("update",nextProps,nextState);
    //}
    onScrollHandle(event){
        if(this.getScrollTop() + this.getWindowHeight() == this.getScrollHeight()){
            if (this.props.needFetch) {
                let page = this.props.currentPage + 1;
                var cate_id=this.props.location.query.cate_id;
                this.props.cateCardListFetch(page,window.sessionStorage.getItem("department_id"),cate_id);
            }
        }
    }



     getScrollTop(){
        var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;
        if(document.body){
            bodyScrollTop = document.body.scrollTop;
        }
        if(document.documentElement){
            documentScrollTop = document.documentElement.scrollTop;
        }
        scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
        return scrollTop;
    }

//文档的总高度

     getScrollHeight(){
        var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;
        if(document.body){
            bodyScrollHeight = document.body.scrollHeight;
        }
        if(document.documentElement){
            documentScrollHeight = document.documentElement.scrollHeight;
        }
        scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
        return scrollHeight;
    }

//浏览器视口的高度

     getWindowHeight(){
        var windowHeight = 0;
        if(document.compatMode == "CSS1Compat"){
            windowHeight = document.documentElement.clientHeight;
        }else{
            windowHeight = document.body.clientHeight;
        }
        return windowHeight;
    }



    render() {
        //console.log("render",this.props);
        return (
            <div>
                <div style={{ margin:"20px 20px 80px 20px",paddingBottom:"40px"}}>
                    <ListView dataList={this.props.cateCardList} itemType={-1}/>
                </div>
                <BottomBar/>
            </div>

        )
    }
}



function mapStateToProps(state) {

    var isNeedFetch = state.get('cateCardList').toJS().isNeedFetch;
    if (state.get('cateCardList').toJS().data.length<10){
        isNeedFetch =false
    }
    return {
        //cateCardList : state.get('cateCardList').toJS().data,
        cateCardList : state.get('cateCardList'),
        currentPage:state.get('cateCardList').toJS().page,
        cate_id:state.get("cateCardList").toJS().cate_id,
        needFetch:isNeedFetch
    }
}
function mapDispatchToProps(dispatch) {

    return bindActionCreators(actions, dispatch);
}
CateContainer.defaultProps = {
    needFetch:true
}


CateContainer.propTypes = {}
module.exports=connect(mapStateToProps, mapDispatchToProps)(CateContainer);


